<?php 
include('head.php');

/////////////////////////PARA SACAR EL NUMERO TOTAL DE RUTAS PÚBLICAS///////////////////////////////////////
$selecttotalrutas = "SELECT COUNT(*) FROM ruta WHERE privacidad = 'PU'"; //.
$resulttotalrutas=$conexion->query($selecttotalrutas) or die("No se ha podido realizar la consulta ".$selecttotalrutas);
$totalrutas = $resulttotalrutas->fetch_row();
////////////////////////////////////////////////////////////////
/////////////////////////PARA SACAR EL NUMERO DE KILOMETROS TOTALES///////////////////////////////////////
$totalkms = 0;
$selecttotalkm = "SELECT SUM(kms) FROM ruta"; //.
$resulttotalkm=$conexion->query($selecttotalkm) or die("No se ha podido realizar la consulta ".$selecttotalkm);
//$nkm = $resulttotalkm->num_rows;
////////////////////////////////////////////////////////////////
////////////////////////////PARA SACAR LOS 5 ULTIMOS USUARIOS////////////////////////////////////
$selectultimosusuarios = "SELECT * FROM usuarios ORDER BY fecha_registro DESC limit 5"; //.
$resultultimosusuarios=$conexion->query($selectultimosusuarios) or die("No se ha podido realizar la consulta ".$selectultimosusuarios);
$nusuarios = $resultultimosusuarios->num_rows;
////////////////////////////////////////////////////////////////
/////////////////////////PARA SACAR EL NUMERO TOTAL DE COMENTARIOS POR USUARIO (NO SE UTILIZA)///////////////////////////////////////
$countcomentarios = "SELECT login, COUNT(id_comentario) AS numerocomentarios FROM comentarios_rutas GROUP BY login limit 10"; //.
$resultcountcomentarios=$conexion->query($countcomentarios) or die("No se ha podido realizar la consulta ".$countcomentarios);
$ncomentarios = $resultcountcomentarios->num_rows;
////////////////////////////////////////////////////////////////
//////////////////////////PARAR SACAR EL TOTAL DE PUNTOS DE CADA USUARIO (ESTO ES PARA EL RANKING)//////////////////////////////////////
$selecttopuser = "select login_usuario, imagen, (puntos_ruta + puntos_imagenes + puntos_varios) AS total_puntos from v_puntuacion group by login_usuario, imagen order by (puntos_ruta + puntos_imagenes + puntos_varios) desc limit 10"; //.
$resultselecttopuser=$conexion->query($selecttopuser) or die("No se ha podido realizar la consulta ".$selecttopuser);
$ntopuser = $resultselecttopuser->num_rows;
//////////////////////////////////////////////////////////////////
////////////////////PARA SACAR UNA RUTA ALEATORIA//////////////////////////////////////////////
$selecturirutas = "SELECT * FROM ruta"; //.
$resulturirutas=$conexion->query($selecturirutas) or die("No se ha podido realizar la consulta ".$selecturirutas);
$urirutas = $resulturirutas->fetch_array();
$nurirutas = $resulturirutas->num_rows;
$aleatorio = array();
for($p = 0; $p<$nurirutas; $p++)
{
	$aleatorio[$p] = $urirutas['uri'];
	$urirutas = $resulturirutas->fetch_array();
}
$resultadoaleatorio = array_rand($aleatorio, 2);

////////////////////////////////////////////////////////////////////
///////////////////////////PARA SACAR LOS DATOS DE LA RUTA ALEATORIA/////////////////////////////////////////
$selectrutaaleatoria = 'SELECT * FROM ruta WHERE uri = \'' . mysqli_real_escape_string($conexion, $aleatorio[$resultadoaleatorio[0]]) . '\'';
$resultrutaaleatoria=$conexion->query($selectrutaaleatoria) or die("No se ha podido realizar la consulta ".$selectrutaaleatoria);
$rutaaleatoria = $resultrutaaleatoria->fetch_array();
////////////////////////////////////////////////////////////////////
///////////////////////////PARA SACAR EL ICONO DE LA RUTA ALEATORIA/////////////////////////////////////////
$actividadrutas = 'SELECT * FROM categoria WHERE tipo =\'' . mysqli_real_escape_string($conexion, $rutaaleatoria['tipo_ruta']) . '\''; 
$resultactividadrutas=$conexion->query($actividadrutas) or die("No se ha podido realizar la consulta ".$actividadrutas);
$tiporuta = $resultactividadrutas->fetch_array();
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAzI4mQZ8gKVAFZT6cfYXNLsuFd9EWv9mM&sensor=false"></script>
<script type="text/javascript">
/*MAPA*/
var n=1;
var latitud=new Array();
var longitud=new Array();
var distanciatotal=0;
var tiempototal=0;
var tiempotxt=new Array();
var tiempo=new Array();
var horas=0;
var minutos=0;
var segundos=0;var myvelocidad=0;
var distancia=new Array();
var velocidad=new Array();
var velocidadnan=new Array();
var velocidadgrafico=new Array();
var velocidadmedia=0;
var filtrovelocidad=new Array();
var filtrovel=0;
var margen=0;
var mylatitud=-9999999;
var mnlatitud=9999999;
var mylongitud=-9999999;
var mnlongitud=9999999;
var centlatitud=0;
var centlongitud=0;
var distancialatitud=0;
var distancialongitud=0;
var auxlat=0;
var auxlat2=0;
var auxlong=0;
var auxlong2=0;
var map;
var punto_inicio;
var punto_final;
var punto;
var punto_vel;
var icono_punto;
var coor_la_al_max=0;
var coor_lo_al_max=0;
var coor_la_al_min=0;
var coor_lo_al_min=0;
var lat_max_vel=0;
var lo_max_vel=0;
var lat2_max_vel=0;
var lo2_max_vel=0;
var la_punto_mapa=0;
var long_punto_mapa=0;
var vel;
var ncoordenadas=0;
var qu=0;
var zeta=0;
var margentotal=0;
var altitud1=new Array();
var altitudnan=new Array();
var altitudvalida=new Array();
var altitudgrafico=new Array();
var distanciatotalgrafico=new Array();
var tiempoobj=new Array();
var e=0;
var tiempografico=new Array();

function initialize()
{
	var osmMapTypeOptions = {
		getTileUrl: function(coord, zoom)
		{
			return "http://tile.openstreetmap.org/" +
			zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
		tileSize: new google.maps.Size(256, 256),
		isPng: true,
		maxZoom: 19,
		minZoom: 0,
		name: "Open Street Map"
	};	
	var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
	/////////////////////////////////////////

	//OPCIONES DE LA CAPA OCM PARA GOOGLE MAPS
	var ocmMapTypeOptions = {
		getTileUrl: function(coord, zoom)
		{
    		return "http://tile.opencyclemap.org/cycle/" +
    		zoom + "/" + coord.x + "/" + coord.y + ".png";
		},
    	tileSize: new google.maps.Size(256, 256),
		isPng: true,
		maxZoom: 19,
		minZoom: 0,
		name: "Open Cycle Map"
	};	
	var ocmMapType = new google.maps.ImageMapType(ocmMapTypeOptions);
	/////////////////////////////////////////	
	var options = {
		zoom: 13,
		center: new google.maps.LatLng(37.998842, -1.169608),
		mapTypeId: google.maps.MapTypeId.HYBRID,
		draggableCursor: 'default',
		draggingCursor: 'default',
		mapTypeControlOptions:
		{
			mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Open Street Map', 'Open Cycle Map', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN],
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		}
	};

	map = new google.maps.Map(document.getElementById('map'), options);
	var points = [];

	map.mapTypes.set('Open Cycle Map', ocmMapType);
	map.setMapTypeId('Open Cycle Map');
	map.mapTypes.set('Open Street Map', osmMapType);
	map.setMapTypeId('Open Street Map');
	
	////////////////////////////////////
	
	var icono_start = new google.maps.MarkerImage('http://www.cadaruta.thehive.es/imagenes/start-race-2.png',
      // INDICAMOS EL TAMA?O QUE TIENE LA IMAGEN
      new google.maps.Size(32, 37),
      // EL ORIGEN DE LA IMAGEN, DESDE DONDE SE VA A IR VIENDO
      new google.maps.Point(0,0),
      // POSICI?N DE LA IMAGEN QUE VA A ESTAR ENCIMA DE LA L?NEA
      new google.maps.Point(18, 34));
	  
	var icono_finish = new google.maps.MarkerImage('http://www.cadaruta.thehive.es/imagenes/finish.png',
     // INDICAMOS EL TAMA?O QUE TIENE LA IMAGEN
      new google.maps.Size(32, 37),
      // EL ORIGEN DE LA IMAGEN, DESDE DONDE SE VA A IR VIENDO
      new google.maps.Point(0,0),
      // POSICI?N DE LA IMAGEN QUE VA A ESTAR ENCIMA DE LA L?NEA
      new google.maps.Point(18, 34));
	
	icono_punto = new google.maps.MarkerImage('http://www.cadaruta.thehive.es/imagenes/direction_down.png',
     // INDICAMOS EL TAMA?O QUE TIENE LA IMAGEN
      new google.maps.Size(32, 37),
      // EL ORIGEN DE LA IMAGEN, DESDE DONDE SE VA A IR VIENDO
      new google.maps.Point(0,0),
      // POSICI?N DE LA IMAGEN QUE VA A ESTAR ENCIMA DE LA L?NEA
      new google.maps.Point(18, 34));

	var polyline = new google.maps.Polyline({
		 path: points,
		 map: map,
		 strokeColor: '#FF0000',
		 strokeWeight: 5,
		 strokeOpacity: 1
	});	

///////////////////////////////////////////////////////////////////////////////////////////////////////////////

	var xmlhttp;
	var j,z,x,i;
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			xmlDoc=xmlhttp.responseXML;
		
			x=xmlDoc.getElementsByTagName("trkpt");
		
			for (i=0;i<x.length;i++)
			{
			
				if(x[i].getAttribute('lat') > -90 && x[i].getAttribute('long') > -180 && x[i].getAttribute('lat') < 90 && x[i].getAttribute('long') < 180)
				{
					if(x[i].getAttribute('lat') < -0.000800 || x[i].getAttribute('long') < -0.000800 || x[i].getAttribute('lat') > 0.000800 || x[i].getAttribute('long') > 0.000800)
					{
						var lat = x[i].getAttribute('lat');
						var long = x[i].getAttribute('lon');
						latitud[e] = lat;
						longitud[e] = long;
						e++;				
						//DIBUJAMOS LA RUTA
						var path = polyline.getPath();
						var p = new google.maps.LatLng(lat, long);
						path.push(p);
						polyline.setMap(map);
				
		////////////////////////////////////////////////////////////////////////////////////////////////////////////////
						if(lat>mylatitud)
						{
							mylatitud = lat;
							auxlong = long
							
						}
						if(lat<mnlatitud)
						{
							mnlatitud = lat;
							auxlong2 = long;
							
						}
						
						if(long>mylongitud)
						{
							mylongitud = long;
							auxlat = lat;
							
						}
						if(long<mnlongitud)
						{
							mnlongitud = long;
							auxlat2 = lat;
						}
					}
				}
			}
	 //CALCULAMOS EL CENTRO DEL MAPA
	 centlatitud = (parseFloat(mylatitud) + parseFloat(mnlatitud))/2;
	 centlongitud = (parseFloat(mylongitud) + parseFloat(mnlongitud))/2;

		/*distancialatitud = Dist(mylatitud, auxlong, mnlatitud, auxlong2);
		distancialongitud = Dist(auxlat, mylongitud, auxlat2, mnlongitud);*/
		
		/*if(distancialatitud>distancialongitud)
		{*/
			var puntoA = new google.maps.LatLng(mylatitud, auxlong);
			var puntoB = new google.maps.LatLng(mnlatitud, auxlong2);		
					
		/*}
		else
		{
			var puntoA = new google.maps.LatLng(auxlat, mylongitud);
			var puntoB = new google.maps.LatLng(auxlat2, mnlongitud);
			
		}*/
		//ESTA PARTE ES LA QUE VA HA ESTABLECER EL ZOOM DEL MAPA SEGÚN LOS PUNTOS "A" Y "B"
		var bounds = new google.maps.LatLngBounds();
		bounds.extend(puntoA);
		bounds.extend(puntoB);
		map.fitBounds(bounds);

	 
		//CENTRAMOS EL MAPA EN EL INICIO DE LA RUTA					 	
		map.setCenter(new google.maps.LatLng(centlatitud, centlongitud));
		
		// CREAMOS DOS MARCAS EN EL MAPA PARA INDICAR EL PRINCIPIO Y EL FIN DE LA RUTA.
		punto_inicio = new google.maps.Marker({
		map: map,
		draggable: false,
		animation: google.maps.Animation.DROP,
		position: new google.maps.LatLng(latitud[0], longitud[0]),
		icon: icono_start
		});
				
		punto_final = new google.maps.Marker({
		map: map,
		draggable: false,
		animation: google.maps.Animation.DROP,
		position: new google.maps.LatLng(latitud[e-1], longitud[e-1]),
		icon: icono_finish
		});
	
	}
}
	xmlhttp.open("GET","<?php print_r($aleatorio[$resultadoaleatorio[0]]); ?>",true);
	xmlhttp.send()
}
/*FIN MAPA*/
/*LISTA ULTIMAS RUTAS EN TIEMPO REAL*/
var control = 1;
var anterior;
$(document).ready(function() {
	if(control == 1)
	{
		$.ajax
		({
			type: "POST",
			url: "/insert_slideDown/demo.php",
			cache: false,
			success: function(html)
						{ 
			
							$("div#update").prepend(html);
							$("div#update div.lista").slideDown("slow");
							control++;
							return false;
		
						}
		});
	}
  
});

setInterval("ultimasrutas()", 1000);
  function ultimasrutas(){
	  $.ajax({
		type: "POST",
		url: "/insert_slideDown/demo2.php",
		cache: false,
		success: function(html)
					{	if(control==2)
						{
							anterior = html;
							control++;
						}				
						if(html != anterior)	
						{
							$("div#update").prepend(html);
							$('div#update div:last').remove();
							$("div#update div:first").slideDown("slow");
							anterior = html;
						}
						else
						{
							//alert('somos iguales');							
						}
						return false;
  					}
					
  			});
			
		}
/*FIN LISTA  ULTIMAS RUTAS EN TIEMPO REAL*/
</script>
</head>
	<body onLoad="initialize()">
    <?php
		include('cabecera.php');
	?>
		<div id="body">
		
			<div class="column_1_3 hiddenOnPhone">
				<div class="box">
					<h2>RUTAS MAS PRECISAS</h2>
					<img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/destacado1.jpg" class="column_1_1" />
					<div class="box_content" >
						Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
						<br />
						<a href="#" class="button">MÁS INFO</a>
					</div>
				</div>
			</div><!--
			--><div class="column_1_3 hiddenOnPhone">
				<div class="box">
					<h2>RETA A TUS AMIGOS</h2>
					<img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/destacado2.jpg" class="column_1_1" />
					<div class="box_content" >
						Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
						<br />
						<a href="#" class="button">MÁS INFO</a>
					</div>
				</div>
			</div><!--
			--><div class="column_1_3 hiddenOnPhone">
				<div class="box">
					<h2>60 ACTIVIDADES</h2>
					<img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/destacado3.jpg" class="column_1_1" />
					<div class="box_content" >
						Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
						<br />
						<a href="#" class="button">MÁS INFO</a>
					</div>
				</div>
			</div>
			
			<div class="column_2_3">
				<div class="box">
                    <div id="map" style="width:100%; height:293px;">
                    	
                    </div>
                    <script language="javascript">
					var cantidad = '<?php echo $totalrutas[0]; ?>';
					$(document).ready(function()
					{
						var $header_display = $('#header_display');
						$header_display.flapper({
							width: 7,
							chars_preset: 'num',
							aling: 'right',
							padding: '0'
						});
						
		
						setTimeout(function()
						{
							$header_display.val(cantidad).change();
							//$demos.val(9).change();
							var toggle = true;
							setInterval(function()
							{
								if (toggle)
								{
									$header_display.val(cantidad).change();
									//$demos.val(9).change();
								}
								else
								{
									$header_display.val(cantidad).change(); //cambia el contenido entre este y el anterior
									//$demos.val(9).change();
								}
								toggle = !toggle;
							}, 5000);
						}, 1000);
					});
				</script>
                	<div id="ruta" style="background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) repeat scroll 0px 0px rgba(255, 255, 255, 0); z-index: 2147483647; position: absolute; margin-top: -293px; padding: 5px; width: 35%;">     
                    	<div id="contenido_ruta" style="">               	
                            <div id="icono_ruta_aleatoria" style="display: inline-block; width: 12%;">
                                <img src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/<?php echo $tiporuta['icono']; ?>" title="" alt="" />
                            </div>
                            <div style="display: inline-block; width: 80%;">
                                <div id="nombre_ruta_aleatoria" style="clear:inherit;">
                                    <h6><a href='<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/ruta/<?php echo $rutaaleatoria['id_ruta']; ?>' ><?php echo $rutaaleatoria['nombre']; ?></a></h6>
                                </div>
                                <div id="distancia_ruta_aleatoria"><h6>
                                    Dist: <?php echo $rutaaleatoria['kms']; ?></h6>
                                </div>
                                <div id="dificultad_ruta_aleatoria">
                                <h6>Dific: <?php echo $rutaaleatoria['dificultad']; ?></h6>
                                </div>
                        	</div> 
                        </div>                       
                  </div>
                    <div id="km" style="text-align: right; z-index: 2147483647; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) repeat scroll 0px 0px rgba(255, 255, 255, 0); margin-top: -70px;">
                    	<span style="position: absolute; margin-left: -99px; background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) repeat scroll 0px 0px rgba(255, 255, 255, 0);">Nº total de rutas</span>
                        <br>
						<input class="header light" id="header_display" />
                    </div>
				</div>
			
			</div><!--
			--><div class="column_1_3">
				<div class="box">
					<h2>VERSIÓN MÓVIL</h2>
                    <img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/mv.png" width="100%" alt="Imágen aplicación móvil" />
				</div>
			</div>
			
			<div class="column_2_3">
				<div class="box">
					<div class="column_4_5"><h2>ÚLTIMAS RUTAS ACTIVAS</h2></div><div class="column_1_5 align_right"><h2><img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/icono_mapa.png" /></h2></div>
                    <div class="box_content" id="update" class="timeline" >
						<!--AQUI SE DIBUJAN LAS ULTIMAS RUTAS-->					
					</div>
				</div>
			
			</div><!--
			--><div class="column_1_3">
				<div class="box">
					<div class="column_2_3"><h2>RANKING DE USUARIOS</h2></div><div class="column_1_3 align_right"><h2><img src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/icono_mapa.png" /></h2></div>
						<div class="box_content" >
							
                                        	<?php
					for($j=1;$j<=$ntopuser;$j++)
					{
						$topuser = $resultselecttopuser->fetch_array();
						
							switch ($j) {
								case $j==1:
								?>									
                                    <div class="lista">
                                        <div class="column_1_3">
                                            <span class="posicion vertical_middle" ><?php echo $j;?></span>&nbsp;
                                            <img class="trofeo" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/imagenes/trofeo_oro.png" />
                                            <img class="foto_usuario vertical_middle" width="33" height="33" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/<?php echo $topuser['imagen']; ?>" />
                                        </div><!--
                                        --><div class="column_1_3" style="height:40px">
                                            <span class="vertical_middle"><a href='<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/usuario/<?php echo $topuser['login_usuario'];?>'><?php echo $topuser['login_usuario']; ?></a></span>
                                            <img class="vertical_middle" style="height:40px; width:1px;" src="imagenes/pixel_transparent.png" />
                                        </div><!--
                                        --><div class="column_1_3">
                                            <span class="vertical_middle distancia_recorrida" >Puntos:</span>
                                            <span class="vertical_middle color_blue" ><?php echo $topuser['total_puntos']; ?></span>
                                        </div>
                                    </div>
								<?php
								break;
								case $j==2:
								?>
									<div class="lista">
                                        <div class="column_1_3">
                                            <span class="posicion vertical_middle" ><?php echo $j;?></span>&nbsp;
                                            <img class="trofeo" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/imagenes/trofeo_plata.png" />
                                            <img class="foto_usuario vertical_middle" width="33" height="33" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/<?php echo $topuser['imagen']; ?>" />
                                        </div><!--
                                        --><div class="column_1_3" style="height:40px">
                                            <span class="vertical_middle"><a href='<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/usuario/<?php echo $topuser['login_usuario'];?>'><?php echo $topuser['login_usuario']; ?></a></span>
                                            <img class="vertical_middle" style="height:40px; width:1px;" src="imagenes/pixel_transparent.png" />
                                        </div><!--
                                        --><div class="column_1_3">
                                            <span class="vertical_middle distancia_recorrida" >Puntos:</span>
                                            <span class="vertical_middle color_blue" ><?php echo $topuser['total_puntos']; ?></span>
                                        </div>
                                    </div>
								<?php
								break;
								case $j==3:
								?>
									<div class="lista">
                                        <div class="column_1_3">
                                            <span class="posicion vertical_middle" ><?php echo $j;?></span>&nbsp;
                                            <img class="trofeo" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/imagenes/trofeo_bronce.png" />
                                            <img class="foto_usuario vertical_middle" width="33" height="33" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/<?php echo $topuser['imagen']; ?>" />
                                        </div><!--
                                        --><div class="column_1_3" style="height:40px">
                                            <span class="vertical_middle"><a href='<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/usuario/<?php echo $topuser['login_usuario'];?>'><?php echo $topuser['login_usuario']; ?></a></span>
                                            <img class="vertical_middle" style="height:40px; width:1px;" src="imagenes/pixel_transparent.png" />
                                        </div><!--
                                        --><div class="column_1_3">
                                            <span class="vertical_middle distancia_recorrida" >Puntos:</span>
                                            <span class="vertical_middle color_blue" ><?php echo $topuser['total_puntos']; ?></span>
                                        </div>
                                    </div>
								<?php 
								break;
								case $j>3:
								?>
							<div class="lista">
								<div class="column_1_3">
									<span class="posicion vertical_middle" ><?php echo $j;?></span>&nbsp;
									<img class="foto_usuario vertical_middle" width="33" height="33" src="<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/<?php echo $topuser['imagen']; ?>" />
								</div><!--
								--><div class="column_1_3">
									<span class="vertical_middle"><a href='<?php echo "http://" . $_SERVER['SERVER_NAME'];?>/usuario/<?php echo $topuser['login_usuario'];?>'><?php echo $topuser['login_usuario']; ?></a></span>
									<img class="vertical_middle" style="height:40px; width:1px;" src="imagenes/pixel_transparent.png" />
								</div><!--
								--><div class="column_1_3" style="height:40px;">
									<span class="distancia_recorrida" >Puntos:</span>
									<span class="color_blue" ><?php echo $topuser['total_puntos']; ?></span>
								</div>
							</div>
				<?php
								break;
							}					
					}
				?>
						</div>
				</div>
			</div>
		</div>
	
		<img id="background_logo" src="<?php echo "http://" . $_SERVER['SERVER_NAME']; ?>/imagenes/logo_fondo.png"/>
        <?php include('footer.php'); ?>
	</body>
</html>